<template>
	<div class="w-full flex <sm:flex-col-reverse">
		<el-form ref="form" label-width="85px" class="md:mr-[40px] <sm:mt-[20px]" :rules="rules" :model="form">
			<el-form-item label="消息标题:" prop="title">
				<el-input v-model.trim="form.title" class="md:w-[302px]" placeholder="请输入标题"></el-input>
			</el-form-item>

			<el-form-item label="消息内容:" prop="content">
				<el-input v-model.trim="form.content" :rows="16" class="md:w-[302px]" maxlength="500" show-word-limit placeholder="请输入消息内容" type="textarea"> </el-input>
			</el-form-item>

			<el-form-item label="消息类型:" label-width="170px" prop="type">
				<el-radio-group v-model="form.type">
					<el-radio :label="true">系统消息</el-radio>
					<el-radio :label="false">短信消息</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="指定目标:" prop="appoint" label-width="170px">
				<el-radio-group v-model="form.appoint">
					<el-radio :label="0">全部用户</el-radio>
					<!--					<el-radio :label="0">会员用户</el-radio>-->
					<el-radio :label="2">指定用户</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button :loading="loading" class="!w-[107px] !h-[40px]" type="primary" @click="handleSubmit">保存 </el-button>
			</el-form-item>
		</el-form>
		<div class="plus__right !<sm:w-full !<sm:h-auto">
			<div>1 : 消息推送属于长时间操作功能，确认推送之后需耐心等待，无需重复【确认推送】</div>
			<div>2：如果消息类型选择【手机短信】，则会消耗平台短信条数，请确保短信条数充足</div>
			<div>3：【指定地区】非必选，默认匹配全国用户，如需指定，请选择省-市-区</div>
		</div>
		<l-dialog v-model="addGoodsFlag" title="指定用户" width="915px" @close="handleClose">
			<el-form ref="goodsForm" :model="goodsForm" :inline="true" label-width="100px">
				<el-form-item label="用户ID:" prop="uuid">
					<el-input v-model.trim="goodsForm.uuid" class="!w-[209px] !max-w-[209px]" maxlength="6" placeholder="请输入用户ID"></el-input>
				</el-form-item>
				<el-form-item label="手机号码:" prop="mobile">
					<el-input v-model.trim="goodsForm.mobile" class="!w-[209px] !max-w-[209px]" placeholder="请输入手机号码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="queryGoodsList">搜索</el-button>
				</el-form-item>
			</el-form>
			<div class="mb-[13px] text-[12px]">
				(已选择 <span class="text-[#F14A46]">{{ selectList.length }}</span
				>个)
			</div>
			<el-table ref="multipleTable" v-loading="goodsLoading" row-key="id" :data="goodsList" stripe @selection-change="selectGoodsChange">
				<el-table-column :formatter="emptyToString" :reserve-selection="true" type="selection" width="55" align="center"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="序号" prop="name" type="index"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile"></el-table-column>
			</el-table>
			<pagination :limit.sync="goodsForm.pageSize" :page.sync="goodsForm.pageNum" :total="goodsTotal" @pagination="getGoodsList" />
			<template slot="footer">
				<el-button class="!w-[366px] mt-[34px] !h-[60px]" type="primary" @click="handleSubmitDialog">确认</el-button>
			</template>
		</l-dialog>
	</div>
</template>

<script>
import { listUser } from '@/api/mall/user';
import { push, systemPush } from '@/api/mall/message';
export default {
	name: 'Plus',
	data() {
		return {
			loading: false,
			form: {
				title: null,
				content: null,
				type: false,
				target: true,
				appoint: 1,
				phone: null,
			},
			rules: {
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				content: [{ required: true, message: '请输入消息内容', trigger: 'blur' }],
				type: [{ required: true, message: '请选择消息类型', trigger: 'blur' }],
				appoint: [{ required: true, message: '请选择指定目标', trigger: 'blur' }],
			},
			goodsForm: {
				pageNum: 1,
				pageSize: 10,
				name: null,
			},
			addGoodsFlag: false,
			goodsLoading: false,
			goodsList: [],
			goodsTotal: 0,
			selectList: [],
		};
	},
	watch: {
		'form.appoint'(newValue) {
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (newValue === 2) {
						this.queryGoodsList();
						this.addGoodsFlag = true;
						return;
					}
					this.addGoodsFlag = false;
				}
			});
		},
	},
	methods: {
		handleSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true;
					this.$request
						.post('/mall/message/push', this.form)
						.then(() => {
							this.msgSuccess('推送成功');
						})
						.finally(() => {
							this.loading = false;
						});
				}
			});
		},
		getGoodsList() {
			this.goodsLoading = true;
			listUser(this.goodsForm)
				.then((response) => {
					this.goodsList = response.data.records;
					this.goodsTotal = response.data.total;
				})
				.finally(() => {
					this.goodsLoading = false;
				});
		},
		selectGoodsChange(value) {
			this.selectList = value;
		},
		queryGoodsList() {
			this.goodsForm.pageNum = 1;
			this.getGoodsList();
		},
		handleSubmitDialog() {
			if (this.selectList.length < 1) {
				this.$message.error('请选择用户!');
				return;
			}

			if (!this.form.title) {
				this.$message.error('请输入标题!');
				return;
			}
			if (!this.form.content) {
				this.$message.error('请输入内容!');
				return;
			}
			this.form.phone = this.selectList.map((item) => item.mobile).join(',');
			if (!this.form.type) {
				push(this.form).then(() => {
					this.handleClose();
					this.$message({
						type: 'success',
						message: '推送成功!',
					});
				});
			} else {
				let obj = {
					content: this.form.content,
					target: 2,
					title: this.form.title,
					type: 0,
					userList: this.form.phone,
				};
				systemPush(obj).then(() => {
					this.$message({
						type: 'success',
						message: '推送成功!',
					});
				});
			}
		},
		handleClose() {
			this.$refs.goodsForm.resetFields();
			if (this.$refs.multipleTable) {
				this.$refs.multipleTable.clearSelection();
			}
			this.selectList = [];
			this.goodsList = [];
			this.addGoodsFlag = false;
		},
	},
};
</script>

<style scoped lang="scss">
.plus__right {
	border: 1px solid #e5e5e5;
	height: 281px;
	width: 266px;
	border-radius: 4px;
	padding: 35px 22px;
	color: #999999;
	font-size: 12px;
	> div {
		margin-bottom: 15px;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
